<template>
    <div class="back">
        <el-container>
            <el-header height="10%">
                <div class="header-div">
                    <img class="img-title" src="@/assets/img/index/title.png"/>
                    <div class="header-font">桐庐县江南镇人民政府</div>
                </div>
                <div style="width:400px;margin-top:15px;margin-right:18px">
                    <el-input v-model="search" placeholder="搜索" style="width: 380px; position: relative; padding-right: 15px;" size="small" @keyup.enter.native="doSearch">  
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch" style="position: absolute; right: 15px;"></i>  
                    </el-input>
                </div>
                <div class="user">
                    <span class="username">{{username}}</span>
                    <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="10%">
                    <div class="left-region">
                        <div class="goback" @click="back">
                            <img class="img-back" src="@/assets/img/back.png"/>
                            <span>返回</span>
                        </div>
                        <div :class="['nav',{'active':show[0]}]" @click="showMeet">新建会议</div>
                        <div :class="['nav',{'active':show[1]}]" @click="showMess">新建通知</div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="right-region">
                        <!-- 新建会议 -->
                        <div class="newMeet" v-show="show[0]">
                            <div class="meet-head">
                                <div>会议信息</div>
                                <div class="meet-button-all">
                                    <el-button class="meet-button" size="mini" @click="submitForm">提交</el-button>
                                    <el-button class="meet-button" size="mini">保存</el-button>
                                </div>
                            </div>
                            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                                <div class="division"></div>
                                <div class="meet-second">
                                    <el-row :gutter="15">
                                        <el-col :span="15">
                                            <el-form-item label="会议类型" prop="meetType">
                                                <el-select v-model="formData.meetType" placeholder="请选择会议类型" clearable :style="{width: '100%'}">
                                                <el-option v-for="(item, index) in meetTypeOptions" :key="index" :label="item.label"
                                                    :value="item.value" :disabled="item.disabled"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="15">
                                            <el-form-item label="会议名称" prop="meetName">
                                                <el-input v-model="formData.meetName" clearable :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="15">
                                            <el-form-item label="参会人员" prop="meetPeople">
                                                <el-input v-model="formData.meetPeople" clearable :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-row :gutter="15">
                                                <el-col :span="8">
                                                    <el-form-item label="会议日期" prop="meetDate">
                                                        <template>
                                                            <el-date-picker
                                                                v-model="formData.meetDate"
                                                                type="date"
                                                                placeholder="会议日期">
                                                            </el-date-picker>
                                                        </template>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-row :gutter="15">
                                                <el-col :span="8">
                                                <el-form-item label="会议时间" prop="meetTime">
                                                    <el-time-picker
                                                        v-model="formData.meetTime"
                                                        :picker-options="{
                                                            selectableRange: '00:00:00 - 23:59:59'
                                                        }"
                                                        placeholder="会议时间">
                                                    </el-time-picker>
                                                </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                        <el-col :span="15">
                                            <el-form-item label="会议地点" prop="meetAddress">
                                                <el-input v-model="formData.meetAddress" clearable :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="15">
                                            <el-form-item label="会议内容" prop="meetContent">
                                                <el-input v-model="formData.meetContent" type="textarea" :autosize="{minRows: 4, maxRows: 4}"
                                                :style="{width: '100%'}"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="division"></div>
                                <div class="meet-third">
                                    <div>其他信息</div>
                                </div>
                                <div class="division"></div>
                                <div>
                                    <el-row>
                                        <el-col :span="15">
                                            <el-form-item label="相关项目" prop="meetProject">
                                                <el-input v-model="formData.meetProject" placeholder="请输入相关项目" clearable :style="{width: '100%'}">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-form-item label="相关附件" prop="meetAnnex">
                                                <el-upload ref="meetAnnex" :file-list="meetAnnexfileList" :action="meetAnnexAction"
                                                :before-upload="meetAnnexBeforeUpload" :on-success="successUpload">
                                                    <el-button size="small" type="primary" icon="el-icon-upload">附件上传</el-button><span style="margin-left:15px;">(每个文件最大不超过50MB)</span>
                                                </el-upload>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="division"></div>
                            </el-form>
                        </div>
                        <!-- 新建通知 -->
                        <div class="newMess" v-show="show[1]">
                            <div class="mess-head">
                                <div>通知信息</div>
                            </div>
                            <div class="division"></div>
                            <el-form ref="noticeForm" :model="noticeFormData" :rules="noticeRules" size="medium" label-width="100px">
                                <el-row :gutter="15">
                                    <el-col :span="15">
                                        <el-form-item label="通知标题" prop="noticeTitle">
                                            <el-input v-model="noticeFormData.noticeTitle" clearable
                                            :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="15">
                                        <el-form-item label="通知人员" prop="noticePeople">
                                            <el-input v-model="noticeFormData.noticePeople" clearable
                                            :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="15">
                                        <el-form-item label="通知内容" prop="noticeContent">
                                            <el-input v-model="noticeFormData.noticeContent" type="textarea"
                                            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="division"></div>
                                <div class="mess-third">
                                    <div>其他信息</div>
                                </div>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="相关附件" prop="noticeAnnex">
                                            <el-upload ref="noticeAnnex" :file-list="noticeAnnexfileList" :action="meetAnnexAction"
                                            :before-upload="meetAnnexBeforeUpload" :on-success="successUpload2">
                                                <el-button size="small" type="primary" icon="el-icon-upload">附件上传</el-button><span style="margin-left:15px;">(每个文件最大不超过50MB)</span>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="division2"></div>
                                <el-col :span="24">
                                    <el-form-item class="mess-button-all">
                                        <el-button class="mess-button1" size="mini" @click="noticeSubmit">提交</el-button>
                                        <el-button class="mess-button2" size="mini" @click="noticeReset">清除全部</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: [true,false],
            username: '用户名',
            avatar: '',
            search: '',  //搜索内容
            formData: {
                meetType: undefined,
                meetName: undefined,
                meetPeople: undefined,
                meetDate: undefined,
                meetTime: undefined,
                meetAddress: undefined,
                meetContent: undefined,
                meetProject: undefined,
                meetAnnex: null,
            },
            rules: {
                meetType: [{
                required: true,
                message: '请选择会议类型',
                trigger: 'change'
                }],
                meetName: [{
                required: true,
                message: '请填写会议名称',
                trigger: 'blur'
                }],
                meetPeople: [{
                required: true,
                message: '请填写参会人员',
                trigger: 'blur'
                }],
                meetDate: [{
                required: true,
                message: '请填写会议日期',
                trigger: 'blur'
                }],
                meetTime: [{
                required: true,
                message: '请填写会议时间',
                trigger: 'blur'
                }],
                meetAddress: [{
                required: true,
                message: '请填写会议地点',
                trigger: 'blur'
                }],
                meetContent: [],
            },
            meetTypeOptions: [{
                "label": "选项一",
                "value": 1
            }, {
                "label": "选项二",
                "value": 2
            }],
            meetAnnexAction: 'https://jsonplaceholder.typicode.com/posts/',
            meetAnnexfileList: [],  //新建会议上传的附件
            noticeAnnexfileList: [],  //新建通知上传的附件
            noticeFormData: {
                noticeTitle: undefined,
                noticePeople: undefined,
                noticeContent: undefined,
                noticeAnnex: null
            },
            noticeRules: {
                noticeTitle: [{
                required: true,
                message: '请输入通知标题',
                trigger: 'blur'
                }],
                noticePeople: [{
                required: true,
                message: '请输入通知人员',
                trigger: 'blur'
                }],
                noticeContent: [{
                required: true,
                message: '请输入通知内容',
                trigger: 'blur'
                }],
            },
        }
    },
    methods: {
        showMeet() {
            this.show.splice(0, 1, true)
            this.show.splice(1, 1, false)
        },
        showMess() {
            this.show.splice(0, 1, false)
            this.show.splice(1, 1, true)
        },
        //搜索框点击搜索
        doSearch() {
            console.log(this.search);
        },
        back() {
            this.$router.go(-1);
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) {
                    this.$message({
                        message: '请填写完整！',
                        type: 'warning'
                    });
                }
                // TODO 提交表单
                console.log(this.formData);
                console.log(this.meetAnnexfileList);
            })
        },
        //附件上传
        meetAnnexBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 50
            if (!isRightSize) {
                this.$message.error('文件大小超过 50MB')
            }
            return isRightSize
        },
        //新建会议上传附件成功后回调
        successUpload(response, file, meetAnnexfileList)	{
            console.log(response);
            this.formData.meetAnnex = response.data.url;
        },
        //新建通知上传附件成功后回调
        successUpload2(response, file, meetAnnexfileList)	{
            console.log(response);
            this.noticeFormData.noticeAnnex = response.data.url;
        },
        noticeSubmit() {
            this.$refs['noticeForm'].validate(valid => {
                if (!valid) {
                    this.$message({
                        message: '请填写完整！',
                        type: 'warning'
                    });
                }
                // TODO 提交表单
                console.log(this.noticeFormData);
            })
        },
        noticeReset() {
            this.$refs['noticeForm'].resetFields()
            this.noticeAnnexfileList = [];
        },
    }
}
</script>

<style scoped>
    .el-header{
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
    }
    .el-aside{
        height: 15%;
        margin-left: 40px;
        padding: 5px 10px 5px 10px;
        background-color: rgb(60, 136, 172);
        border-radius: 8px;
        color: white;
    }
    .el-main{
        height: 95%;
        margin-right: 100px;
        margin-left: 20px;
        border-radius: 10px;
        background-color: white;
        overflow:hidden;
    }
    .back{
        background: url("../../assets/img/background.png");
        display: flex;
        height: 100%;
        vertical-align:top;
    }
    .right-region{
        width: 100%;
        height: 100%;
        overflow:hidden;
    }
    .img-title{
        width: 190px;
        height: 190px;
        margin-top: -45px;
        margin-left: -50px;
    }
    .header-div{
        margin-top: -20px;
        vertical-align:middle;
        display: flex;
    }
    .header-font{
        font-size: 35px;
        margin-top: 30px;
        margin-left: -50px;
        color: white;
    }
    .user *{
        font-size: 15px;
        vertical-align:middle;
        margin-top: 10px;
    }
    .user{
        margin-right: 80px;
    }
    .nav{
        width: 90%;
        margin: 0 auto;
        text-align: center;
        cursor:pointer;
        margin-bottom: 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 8px;
    }
    .active{
        background-color: rgb(245, 170, 32);
    }
    .img-back{
        width: 20px;
        height: 20px;
    }
    .goback *{
        font-size: 15px;
        vertical-align:middle;
    }
    .goback{
        width: 90%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
    }
    /* 新建会议第一层样式 */
    .meet-head{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 600;
    }
    /* 会议单个按钮样式 */
    .meet-button{
        background-color: rgb(60, 136, 172);
        color: white;
        border-radius: 5px;
    }
    /* 分割线 */
    .division{
        width: 100%;
        margin: 0 auto;
        height: 2px;
        background-color: rgb(209, 208, 208);
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /* 按钮区域样式 */
    .meet-button-all{
        margin-right: 60px;
    }
    /* 新建会议第三层样式、新建通知第一层样式、新建通知第三层样式 */
    .meet-thir,.mess-head,.mess-third{
        font-weight: 600;
    }
    /* 新建通知最后一天分割线 */
    .division2{
        width: 100%;
        margin: 0 auto;
        height: 2px;
        background-color: rgb(209, 208, 208);
        margin-top: 250px;
        margin-bottom: 15px;
    }
    /* 新建通知的按钮样式 */
    .mess-button1{
        background-color: rgb(60, 136, 172);
        color: white;
        border-radius: 5px;
        width: 100px;
    }
    .mess-button2{
        background-color: rgb(235, 70, 70);
        color: white;
        border-radius: 5px;
        width: 100px;
    }
    .mess-button-all{
        text-align: center;
        margin-right: 40px;
    }
</style>